<template>
  <div class="ontology-edit-node">
    <div class="node-empty" v-show="drawerTypeOfNode == 'empty'">
      请选择节点查看节点详情，或者点击新增节点按钮新增节点。
    </div>
    <div
      class="node-edit self-scroll"
      ref="nodeEdit"
      v-show="drawerTypeOfNode !== 'empty'"
      style="padding: 16px"
    >
      <el-form
        :model="nodeData"
        ref="nodeForm"
        :rules="rules"
        hide-required-asterisk
      >
        <el-form-item label="节点名称：" prop="name" class="node-form">
          <!-- <el-input v-model.trim="nodeData.name" :readonly="drawerTypeOfNode==='detail'" class="default-name"
                        clearable></el-input> -->
          <el-input
            v-model.trim="nodeData.name"
            v-if="drawerTypeOfNode !== 'detail'"
            class="default-name"
            maxlength="50"
            show-word-limit
          ></el-input>
          <p v-else class="node-form-value">{{ nodeData.name }}</p>
        </el-form-item>
        <el-form-item
          label="父级节点："
          class="node-form"
          v-show="drawerTypeOfNode === 'detail'"
        >
          <div class="parent-box">
            <!-- <el-input v-model.trim="parentName" readonly class="default-name"></el-input> -->
            <p v-if="parentName" class="node-form-value">{{ parentName }}</p>
            <p v-else class="node-form-value">无</p>
          </div>
        </el-form-item>
        <el-form-item
          label="父级节点："
          prop="parentIds"
          class="node-form"
          v-show="drawerTypeOfNode !== 'detail'"
        >
          <div class="parent-box">
            <el-cascader
              ref="refSubCat"
              v-model="nodeData.parentIds"
              :options="parentList"
              class="default-name"
              @change="handleChange"
              :filter-method="searchParent"
              :show-all-levels="false"
              :props="{ checkStrictly: true }"
              filterable
              clearable
            >
            </el-cascader>
          </div>
        </el-form-item>
      </el-form>
      <div class="upload-img">
        <div class="title" style="color: #999999">缩略图:</div>
        <el-image
          v-if="drawerTypeOfNode === 'detail'"
          style="width: 74px; height: 74px"
          :src="imgUrl"
          fit="fill"
        >
          <div
            slot="error"
            style="
              width: 72px;
              line-height: 72px;
              text-align: center;
              color: #999999;
              width: 72px;
              height: 72px;
              border-radius: 2px;
              border: 1px solid rgba(0, 0, 0, 0.15);
            "
          >
            暂无图片
          </div>
        </el-image>
        <div v-else>
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :http-request="uploadImage"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="imgUrl"
              style="width: 72px; height: 72px"
              :src="imgUrl"
              class="avatar"
              fit="fill"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <el-button
              size="small"
              v-if="drawerTypeOfNode === 'edit'"
              type="primary"
              class="reupload"
              >重新上传
            </el-button>
          </el-upload>
        </div>
      </div>
      <div class="property-box">
        <div class="property-header">
          <span class="title">属性信息:</span>
          <!-- <el-button v-if="drawerTypeOfNode!=='detail'" @click="openDialog" type="primary">新增</el-button> -->
          <div
            style="color: #4b71eb; cursor: context-menu"
            @click="openDialog"
            v-if="drawerTypeOfNode !== 'detail'"
          >
            <i
              class="el-icon-plus"
              style="font-size: 12px; margin-right: 6px"
            ></i
            ><i>新增</i>
          </div>
        </div>
        <el-table
          :data="tableList"
          @row-contextmenu="tableClick"
          border
          :cell-style="{ padding: '6px 0' }"
          :header-cell-style="{
            background: 'rgba(61, 96, 212, 0.12)',
            height: '36px',
            color: '#333333',
          }"
          class="property-table"
        >
          <el-table-column label="序号" width="50" align="center" fixed="left">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="propertyName"
            label="属性名"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="propertyTypeName"
            label="属性值类型"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            width="100"
            v-if="drawerTypeOfNode !== 'detail'"
          >
            <template slot-scope="scope">
              <div v-show="drawerTypeOfNode !== 'detail'" style="">
                <i
                  class="el-icon-edit"
                  v-if="scope.row.extend === 1"
                  disabled
                  style="margin-right: 16px"
                ></i>
                <i
                  class="el-icon-delete"
                  v-if="scope.row.extend === 1"
                  disabled
                  slot="reference"
                ></i>
                <i
                  class="el-icon-edit"
                  v-if="scope.row.extend === 0"
                  @click="nodeEditScope(scope.row)"
                  style="margin-right: 16px"
                ></i>
                <i
                  class="el-icon-delete"
                  slot="reference"
                  v-if="scope.row.extend === 0"
                  @click="nodeDelScope(scope.row)"
                ></i>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog
        :title="dialogFormTitle"
        :visible.sync="dialogFormVisible"
        @close="afterDialogClose"
        :append-to-body="true"
      >
        <el-form
          :model="property"
          :rules="propertyRules"
          ref="dialogForm"
          label-position="right"
          label-width="120px"
        >
          <el-form-item label="所属概念:" class="dialog-inline">
            <span>{{ nodeData.name }} </span>
          </el-form-item>
          <el-form-item
            label="属性名:"
            prop="propertyName"
            class="dialog-inline"
          >
            <el-input
              v-model.trim="property.propertyName"
              maxlength="50"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item
            label="属性值类型:"
            prop="propertyType"
            class="dialog-inline"
          >
            <el-select
              v-model="property.propertyType"
              @change="changePropertyType"
            >
              <el-option
                v-for="item in propertyTypeOptions"
                :key="item.key"
                :value="item.key"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="
              property.propertyType == 'int' || property.propertyType == 'float'
            "
            label="计量单位:"
            prop="measureUnit"
            class="dialog-inline"
          >
            <el-input
              type="input"
              v-model.trim="property.measureUnit"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="约束类型:"
            prop="propertyBind"
            class="dialog-inline"
          >
            <el-select
              v-model="property.propertyBind"
              :disabled="property.propertyBindDisabled"
            >
              <el-option
                v-for="item in getBindOptions(bindOptions)"
                :key="item.key"
                :value="item.key"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="约束配置:"
            class="dialog-inline"
            v-if="property.propertyBind && property.propertyBind != 'no_bind'"
          >
            <div v-if="property.propertyBind == 'enum'">
              <el-form-item prop="enumNames">
                <span
                  style="position: relative; margin-right: 10px"
                  v-for="(item, index) in property.enumNames"
                  :key="item.key"
                >
                  <el-input
                    v-if="
                      property.propertyType != 'date' &&
                      property.propertyType != 'datetime'
                    "
                    style="width: 154px; margin-bottom: 10px"
                    v-model="property.enumNames[index]"
                  ></el-input>
                  <el-date-picker
                    style="width: 154px; margin-bottom: 10px"
                    v-if="property.propertyType == 'date'"
                    v-model="property.enumNames[index]"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    :clearable="false"
                  >
                  </el-date-picker>
                  <el-date-picker
                    v-if="property.propertyType == 'datetime'"
                    style="width: 154px; margin-bottom: 10px"
                    v-model="property.enumNames[index]"
                    type="datetime"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :clearable="false"
                  >
                  </el-date-picker>

                  <i
                    style="
                      position: absolute;
                      right: 2px;
                      top: 1px;
                      color: #1b85ff;
                    "
                    class="el-icon-close"
                    @click="property.enumNames.splice(index, 1)"
                  ></i>
                </span>
                <span
                  style="
                    border-radius: 3px;
                    padding: 5px;
                    color: #1b85ff;
                    border: 1px solid;
                    margin: 15px;
                    cursor: pointer;
                  "
                  @click="property.enumNames.push('')"
                  >新增</span
                >
              </el-form-item>
            </div>
            <div v-else>
              <el-row>
                <el-col :span="10">
                  <el-form-item prop="startRange">
                    <el-input
                      v-if="
                        property.propertyType != 'date' &&
                        property.propertyType != 'datetime'
                      "
                      v-model="property.startRange"
                      style="width: 133px"
                    ></el-input>
                    <el-date-picker
                      :picker-options="pickerOptionsStart(property.endRange)"
                      style="width: 133px"
                      v-if="property.propertyType == 'date'"
                      v-model="property.startRange"
                      align="right"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                      :clearable="false"
                    >
                    </el-date-picker>
                    <el-date-picker
                      :picker-options="pickerOptionsStart(property.endRange)"
                      v-if="property.propertyType == 'datetime'"
                      style="width: 133px"
                      v-model="property.startRange"
                      type="datetime"
                      placeholder="选择日期时间"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :clearable="false"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="1" style="margin-right: 5px">
                  <span> ~ </span>
                </el-col>
                <el-col :span="10">
                  <el-form-item prop="endRange">
                    <el-input
                      v-if="
                        property.propertyType != 'date' &&
                        property.propertyType != 'datetime'
                      "
                      v-model="property.endRange"
                      style="width: 133px"
                    ></el-input>
                    <el-date-picker
                      style="width: 133px"
                      v-if="property.propertyType == 'date'"
                      v-model="property.endRange"
                      align="right"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                      :clearable="false"
                      :picker-options="pickerOptionsEnd(property.startRange)"
                    >
                    </el-date-picker>
                    <el-date-picker
                      :picker-options="pickerOptionsEnd(property.startRange)"
                      v-if="property.propertyType == 'datetime'"
                      style="width: 133px"
                      v-model="property.endRange"
                      type="datetime"
                      placeholder="选择日期时间"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :clearable="false"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetDialogForm">取 消</el-button>
          <el-button type="primary" @click="submitDialogForm" :loading="loading"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <div v-if="drawerTypeOfNode === 'detail'" style="display: flex">
      <div class="btn btn-edit" @click="changePageStatus('edit')">编辑</div>
      <div class="btn btn-delete" @click="changePageStatus('delete')">删除</div>
    </div>
    <div class="btn" v-else @click="changePageStatus('detail')">保存</div>
  </div>
</template>
<script>
import { deepClone } from '@/plugins/utils'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'EditNode',
  props: {
    nodeId: {
      // 当前节点id
      type: Number,
      default: 1,
    },
    // ontologyAllId: {
    //     type: String,
    //     require: true,
    // },
    isShowNode: {
      type: Boolean,
      required: true,
      default: true,
    },
  },
  data: () => {
    return {
      propertyTypeOptions: [
        { key: 'text', label: '字符串' },
        { key: 'int', label: '整数值' },
        { key: 'float', label: '浮点值' },
        { key: 'date', label: '日期' },
        { key: 'datetime', label: '日期时间' },
        { key: 'coordinate', label: '坐标' },
        { key: 'array', label: '数组' },
        { key: 'image', label: '图片' },
        { key: 'file', label: '文件' },
      ],
      bindOptions: [
        { key: 'no_bind', label: '无约束' },
        { key: 'enum', label: '枚举值' },
        { key: 'range', label: '范围值' },
      ],
      propertyTypeObj: {
        text: '字符串',
        int: '整数值',
        float: '浮点值',
        date: '日期',
        datetime: '日期时间',
        coordinate: '坐标',
        array: '数组',
        image: '图片',
        file: '文件',
      },
      nodeData: {
        name: '', // 当前节点name
        // parentName:'', // 父节点name
        parentIds: null, // 祖先节点ids
      },
      parentName: '',
      imgUrl: null, // 缩略图url
      // currentType:'detail', // 当前状态 detail详情，add新增，edit编辑，empty,空状态
      selfProperty: [], // 自己的属性
      parentProperty: [], // 父节点的属性
      tableList: [], // 包含所有的属性
      parentList: [], // 父节点列表
      dialogFormTitle: '新增属性', // 属性标题
      dialogFormVisible: false, // 属性dialog
      popoverVisible: false, // 属性删除提示
      property: {
        // 属性
        propertyName: null, // 属性值名
        propertyType: '', // 属性值类型
        enumNames: [],
        startRange: '',
        endRange: '',
        propertyBind: '',
        measureUnit: '',
      },
      propertyRules: {
        // 属性表单规则
        propertyName: [
          {
            required: true,
            message: '请输入属性名',
            trigger: 'blur',
          },
        ],
        propertyType: [
          {
            required: true,
            message: '请输入属性值类型',
            trigger: 'blur',
          },
        ],
        propertyBind: [
          {
            required: true,
            message: '请选择约束类型',
            trigger: 'blur',
          },
        ],
        measureUnit: [
          {
            required: true,
            message: '请输入计量单位',
            trigger: 'blur',
          },
        ],
        startRange: [
          {
            required: true,
            message: '请输入开始范围',
            trigger: 'blur',
          },
        ],
        endRange: [
          {
            required: true,
            message: '请输入结束范围',
            trigger: 'blur',
          },
        ],
        enumNames: [
          {
            required: true,
            message: '请输入枚举值',
            trigger: 'blur',
          },
        ],
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入节点名称',
            trigger: 'blur',
          },
        ],
      },
      loading: false,
      propertyTypes: [
        {
          label: '数值',
          value: 'number',
        },
        {
          label: '日期',
          value: 'date',
        },
        {
          label: '日期时间',
          value: 'time',
        },
        {
          label: '文本型',
          value: 'text',
        },
      ],
      propertyTypesSub: {
        number: [
          '个',
          '厘米',
          '米',
          '千米',
          '平方米',
          '公顷',
          '平方千米',
          '立方米',
          '克',
          '千克',
          '吨',
        ],
        date: ['年', '月', '天'],
        time: ['秒', '分', '时'],
      },
      eleLoading: null,
    }
  },
  // created() {
  //     this.getAllParentNodes(null);
  // },
  mounted() {
    setTimeout(() => {
      this.getAllParentNodes(null)
    }, 1000)
  },
  computed: {
    ...mapState({
      drawerTypeOfNode: (state) => state.ontologyModel.drawerTypeOfNode,
      currentNode: (state) => state.ontologyModel.currentNode,
      ontologyAllId: (state) => state.ontologyModel.ontologyAllId,
    }),
  },
  methods: {
    ...mapMutations({
      change_drawer_type_of_node: 'ontologyModel/change_drawer_type_of_node',
      change_current_node: 'ontologyModel/change_current_node',
    }),
    pickerOptionsStart(endRange) {
      return {
        disabledDate: (time) => {
          if (endRange && endRange !== '') {
            return time.getTime() > new Date(endRange).getTime() - 86400000
          }
        },
      }
    },
    pickerOptionsEnd(startRange) {
      return {
        disabledDate: (time) => {
          if (startRange && startRange !== '') {
            return time.getTime() < new Date(startRange).getTime()
          }
        },
      }
    },
    getBindOptions(val) {
      if (this.property.propertyType == 'text') {
        return [
          { key: 'no_bind', label: '无约束' },
          { key: 'enum', label: '枚举值' },
        ]
      } else {
        return [
          { key: 'no_bind', label: '无约束' },
          { key: 'enum', label: '枚举值' },
          { key: 'range', label: '范围值' },
        ]
      }
    },
    changePropertyType(val) {
      if (['coordinate', 'array', 'image', 'file'].includes(val)) {
        this.property.propertyBind = 'no_bind'
        this.property.propertyBindDisabled = true
      } else {
        this.property.propertyBindDisabled = false
      }
      if (['date', 'datetime', 'int', 'float'].includes(val)) {
        this.property.startRange = ''
        this.property.endRange = ''
      }
      // 切换为字符串类型时 如果已经选择了范围约束类型 则重置
      if (val === 'text' && this.property.propertyBind === 'range') {
        this.property.propertyBind = 'no_bind'
      }
    },
    // 获取节点详情
    getNodeDetails() {
      if (this.currentNode && this.currentNode.id) {
        let neo4jId;
        if(this.currentNode.id.indexOf('prop') === -1){
          neo4jId = this.currentNode.id;
        }else{
          neo4jId = this.currentNode.id.split('prop')[0];
        }
        let params = { neo4jId }
        // let params = {
        //   neo4jId: this.currentNode.id,
        // }
        this.$axios
          .get(this.$api.ontologyModel.xinbiaoObj.getNodeDetail, {
            params,
          })
          .then((res) => {
            let data = res.data.data
            this.nodeData.id = data.id
            this.nodeData.name = data.name
            this.parentName = data.parentName
            this.nodeData.parentIds = data.parentIds
            this.imgUrl = data.imgUrl
            if (data.property.length) {
              this.tableList = data.property.map((item, index) => {
                item.propertyTypeName = this.propertyTypeObj[item.propertyType]
                item.id = index + 1
                return item
              })
            } else {
              this.tableList = []
            }
          })
      }
    },

    // 新增属性
    openDialog() {
      this.editPropertyId = -1
      this.dialogFormTitle = '新增属性'
      this.dialogFormVisible = true
    },
    // 关闭
    afterDialogClose() {
      this.property = {
        // 属性
        propertyName: null, // 属性值名
        propertyType: '', // 属性值类型
        enumNames: [],
        startRange: '',
        endRange: '',
        propertyBind: '',
        measureUnit: '',
      }
    },
    // 切换编辑状态
    changePageStatus(type) {
      if (type === 'detail') {
        this.eleLoading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.2)',
          fullscreen: false,
          target: this.$refs.nodeEdit,
        })
        // 点击保存时
        this.$refs.nodeForm.validate((valid) => {
          if (valid) {
            let url =
              this.drawerTypeOfNode === 'add'
                ? this.$api.ontologyModel.xuekuiObj.saveNode
                : this.$api.ontologyModel.xuekuiObj.editNode
            this.saveNode(this.drawerTypeOfNode, url)
              .then((res) => {
                if (res) {
                  this.$emit('changeByNode', res)
                  this.change_current_node(res.nodes)
                  this.getNodeDetails()
                  // this.getAllParentNodes();
                  this.change_drawer_type_of_node(type)
                  this.eleLoading.close()
                }
              })
              .catch((err) => {
                console.error(err)
                this.eleLoading.close()
              })
          } else {
            this.eleLoading.close()
            return false
          }
        })
      }
      if (type === 'edit') {
        this.change_drawer_type_of_node(type)
      }
      if (type === 'delete') {
        this.$emit('deleteNode', this.nodeData)
      }
    },
    // 获取父节点列表
    getAllParentNodes(removeId) {
      let params = {
        // ontologyAllId: "20211019",
        ontologyAllId: this.ontologyAllId,
        removeId,
      }
      return this.$axios
        .get(this.$api.ontologyModel.xuekuiObj.getParentNodes, {
          params,
        })
        .then((res) => {
          let data = res.data.data
          this.parentList = []
          this.removeEmptyChild(data, this.parentList)
        })
    },
    removeEmptyChild(data, list) {
      if (data && data.length > 0) {
        data.forEach((_data) => {
          let { children, label, parentId, value } = _data
          let child = []
          if (children && children.length > 0) {
            this.removeEmptyChild(children, child)
          }
          let item = {
            label,
            parentId,
            value,
          }
          if (child && child.length > 0) {
            item.children = child
          }
          list && list.push(item)
        })
      }
    },
    // 模糊查询
    // getKeywordParentNodes(keyword){
    //     let params = {keyword:keyword,ontologyAllId:this.nodeId};
    //     return this.$axios.post(this.$api.ontologyModel.getParentNodes,params).then(res=>{
    //         let data = res.data.data;
    //         console.log('allParentList',data)
    //         return data;
    //         // this.parentList = data;
    //     })
    // },
    // 查询父类节点
    searchParent(node, keyword) {
      if (
        !!~node.text.indexOf(keyword) ||
        !!~node.text.toUpperCase().indexOf(keyword.toUpperCase())
      ) {
        return true
      }
    },
    tableClick(row, column, event) {},
    // 删除属性
    deleteProperty(row) {
      this.$confirm('此操作删除此属性, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let id = row.id
          let delIndex = this.tableList.findIndex((item, index) => {
            return item.id === id
          })
          if (delIndex > -1) {
            this.tableList.splice(delIndex, 1)
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 获取最新的父节点
    handleChange(e) {
      if (this.nodeData.parentIds && this.nodeData.parentIds.length) {
        this.getParentProperty()
      } else {
        // 清空属性
        this.tableList = []
      }
      // let labels = this.$refs["refSubCat"].getCheckedNodes();
    },
    // 校验图片格式
    beforeAvatarUpload(file) {
      let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
      // 判定是否是png,jpg,jpeg类型文件
      let imgRec = /(png|jpg|jpeg)$/
      if (imgRec.test(extension.toLowerCase())) {
        return true
      } else {
        this.$message.error(
          '文件格式不符合要求，请选择png、jpg、jpeg图片格式重新上传。'
        )
        return false
      }
    },
    //上传图片
    uploadImage(fileObj) {
      let file = fileObj.file
      this.$fileHttp
        .uploadFile(this.$api.ontologyModel.xinbiaoObj.uploadImg, {
          file,
        })
        .then((res) => {
          let data = res.data.data
          this.imgUrl = data
        })
        .catch((err) => {
          console.error(err)
        })
    },
    // 图上传成功后回调
    // handleAvatarSuccess(){
    //     console.log('upload ok')
    // },
    // 新增/编辑属性
    submitDialogForm() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          let enumNames = this.property.enumNames
          let find = enumNames.find((es) => {
            return es == ''
          })
          if (find) {
            this.$message.warning('枚举值不能为空')
            return
          }
          this.property.propertyTypeName =
            this.propertyTypeObj[this.property.propertyType]
          // 当前是编辑状态
          if (this.editPropertyId >= 0) {
            let editIndex = this.tableList.findIndex((item) => {
              return item.id === this.editPropertyId
            })
            let tableItem = deepClone(this.property)
            tableItem.id = this.editPropertyId
            this.tableList.splice(editIndex, 1, tableItem)
          } else {
            // 当前是新增状态
            let tableItem = deepClone(this.property)
            tableItem.id = this.tableList.length
              ? this.tableList[this.tableList.length - 1].id + 1
              : 1
            tableItem.extend = 0
            this.tableList.push(tableItem)
          }
          this.dialogFormVisible = false
          return true
        } else {
          return false
        }
      })
    },
    cancelDelProperty() {
      this.popoverVisible = false
    },
    resetDialogForm() {
      this.dialogFormVisible = false
    },
    nodeDelScope(row) {
      this.deleteProperty(row)
    },
    // 编辑当前属性
    nodeEditScope(row) {
      this.dialogFormTitle = '编辑属性'
      this.dialogFormVisible = true
      this.editPropertyId = row.id
      Object.assign(this.property, row)
      this.property.propertyBindDisabled = [
        'coordinate',
        'array',
        'image',
        'file',
      ].includes(row.propertyType)
    },
    // 获取父节点的属性
    getParentProperty() {
      let parentId = this.nodeData.parentIds[this.nodeData.parentIds.length - 1]
      let params = {
        parentId,
      }
      this.$axios
        .get(this.$api.ontologyModel.xinbiaoObj.getParentProperty, {
          params,
        })
        .then((res) => {
          let data = res.data.data
          this.tableList = data.map((item, index) => {
                item.propertyTypeName = this.propertyTypeObj[item.propertyType]
                item.id = index + 1
                item.extend = 1
                return item
              })
        })
        .catch((err) => {
          console.error(err)
        })
    },
    saveNode(type, url) {
      let { name, parentIds } = this.nodeData
      let property = this.tableList
      // debugger;
      let parentId = parentIds ? parentIds[parentIds.length - 1] : null
      let params = {
        ontologyAllId: this.ontologyAllId,
        ontologyName: name,
        parentId: parentId,
        imgUrl: this.imgUrl,
        property,
      }
      if (type === 'edit') {
        params.ontologyId = this.currentNode.ontologyId
      }
      return this.$axios
        .post(url, params)
        .then((res) => {
          let code = res.data.code
          let message = res.data.message
          let ontologyId = res.data.data
          if (+code === 200) {
            let data = res.data.data
            return data
          } else {
            if (+code === 10011) {
              return this.$confirm(
                '节点已存在，但为禁用状态，是否重新启用？',
                '提示',
                {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                }
              )
                .then(() => {
                  return this.enableOntology(ontologyId)
                })
                .catch(() => {
                  this.eleLoading.close()
                })
            } else {
              this.$message.warning(message)
              this.eleLoading.close()
              return false
            }
          }
        })
        .catch((err) => {
          console.error(err)
        })
    },

    async enableOntology(ontologyId) {
      let params = {
        ontologyId,
      }
      let res = await this.$axios.get(
        this.$api.ontologyModel.xuekuiObj.enableOntology111,
        {
          params,
        }
      )
      if (res.data.code === 200) return res.data.data
    },
  },
  watch: {
    isShowNode: {
      handler: function (val) {
        // 点击边之后点击点
        if (this.isShowNode) {
          this.getNodeDetails()
          if (this.currentNode && this.currentNode.ontologyId) {
            this.getAllParentNodes(this.currentNode.ontologyId)
          }
        }
      },
    },
    'currentNode.id': {
      handler: function (val) {
        this.getNodeDetails()
        if (this.currentNode && this.currentNode.ontologyId) {
          this.getAllParentNodes(this.currentNode.ontologyId)
        }
      },
      immediate: true,
    },
    ontologyAllId: {
      handler: function (val) {
        if (this.ontologyAllId) {
          this.getAllParentNodes(this.ontologyAllId)
        }
      },
      immediate: true,
    },
    drawerTypeOfNode: {
      handler: function (val) {
        if (val === 'add') {
          this.getAllParentNodes(null)
          this.$refs.nodeForm && this.$refs.nodeForm.clearValidate()
          this.nodeData.name = ''
          this.nodeData.parentIds = null
          this.imgUrl = ''
          this.tableList = []
        }
      },
      immediate: true,
    },
  },
}
</script>
<style lang="scss" scoped>
@import '../../../assets/scss/scroll';
.node-edit {
  position: relative;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: #333333;
  .node-form {
    margin-bottom: 16px;
    /deep/ .el-form-item__error {
      margin-left: 85px;
    }
    /deep/ .el-form-item__label {
      color: #999;
    }
    /deep/ .el-form-item__content {
      margin-left: 80px;
    }

    text-align: left;

    .default-name {
      width: 200px;
      /deep/ .el-input__inner {
        height: 32px;
      }
    }
    .node-form-value {
      width: 200px;
      // height: 32px;
      background: #f3f4f8;
      border-radius: 2px;
      line-height: 32px;
      padding-left: 6px;
      box-sizing: border-box;
    }
    .parent-box {
      .parent-box-input {
        position: relative;
      }

      .hide-select {
        position: absolute;
        top: 0;
        left: 82px;
        z-index: -1;
      }
    }
  }

  .upload-img {
    height: 120px;
    text-align: left;
    position: relative;

    .title {
      margin-bottom: 10px;
    }

    .reupload {
      position: absolute;
      bottom: 0px;
      left: 96px;
      width: 78px;
      height: 28px;
      padding: 6px;
    }

    /deep/ .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      // overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 72px;
      height: 72px;
      line-height: 72px;
      text-align: center;
    }

    .avatar {
      width: 72px;
      height: 72px;
      display: block;
    }
  }

  .property-box {
    .property-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
    }
  }

  // .submit-btn {
  //     display: flex;
  //     justify-content: space-between;
  //     align-items: center;
  //     position: absolute;
  //     right: 0;
  //     top: 0;

  //     .submit-btn-item {
  //         margin-right: 5px;
  //     }
  // }
}

/deep/ .el-dialog {
  width: 500px;
  border-radius: 5px;

  .el-input {
    width: 300px;
  }
}

.ontology-edit {
  padding: 0 5px;
}

.node-empty,
.node-edit {
  height: 100%;
}
.property-table {
  /deep/ th {
    padding: 0;
  }
  /deep/ td {
    padding: 0;
  }
}
.ontology-edit-node {
  width: 100%;
  height: 100%;
  .node-edit {
    height: calc(100% - 96px);
  }
  .btn {
    height: 32px;
    background: #4b71eb;
    border-radius: 2px;
    border: 1px solid #4b71eb;
    line-height: 32px;
    text-align: center;
    cursor: context-menu;
    margin: 16px;
    box-sizing: border-box;
    color: #ffffff;
  }
  .btn-edit {
    margin: 10px;
    width: 60%;
    background: #ffffff;
    color: #4b71eb;
  }
  .btn-delete {
    margin: 10px;
    border: 1px solid red;
    width: 40%;
    background: #ffffff;
    color: red;
  }
}
</style>
